import "./index.css";

import { Suspense } from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { RecoilRoot } from "recoil";
import "virtual:svg-icons-register";
import '@gitee/tide/dist/style.css';
import 'highlight.js/styles/default.css';

import App from "./App";
import { SuspendFallbackLoading } from "./components/suspend-fall-callback";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: true,
      refetchInterval: false,
    },
  },
});

ReactDOM.render(
  <QueryClientProvider client={queryClient} >
    <RecoilRoot>
      <Suspense fallback={SuspendFallbackLoading}>
        <App />
      </Suspense>
    </RecoilRoot>
  </QueryClientProvider>,
  document.getElementById("root")
);
